// Logs and card containing them
.logs-card {
  display: none;

  &[data-messages-present="true"] {
    display: block;
  }

  #logger-messages {
    pre {
      color: $text-color;
      margin-bottom: 0;
      padding: 0.25rem;
      font-size: 0.75rem;

      &:hover {
        background-color: change-color($color-gray-warm-100, $alpha: 0.5);
      }

      &.log-level-notice, &.log-level-info {
      }

      &.log-level-debug {
        color: change-color($color-blue, $alpha: 0.75);
      }

      &.log-level-warning, &.log-level-warn {
        color: change-color($color-yellow);
      }

      &.log-level-error, &.log-level-critical, &.log-level-alert, &.log-level-emergency {
        color: change-color($color-red);
      }
    }

    overflow-y: scroll;
    height: 350px;
  }
}
